<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- react核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<!-- 支持react操作DOM -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<!-- 引入Babel，用于将JSX转换为JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<!-- prop-types -->
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>

</head>
<body>
<div id="test"></div>
<script type="text/babel"> 
    //#region
    /*
        高阶函数：如果一个函数符合下面2个规范中的任意一个，那么他就是高阶函数
        1. 如果函数A，接受参数是一个函数，那么A就可以称为高阶函数
        2. 如果函数A，调用的返回值依然是一个函数，那么A也可以称为高阶函数
        常见的高阶函数有哪些:
        1. Promise
        2. setTimeout
        3. arr.map()
        函数的柯里化，通过函数调用继续返回函数的方式，实现多次接受参数最后统一理的函数编码形式。 
      
    */
    //#endregion

    class Login extends React.Component{
       
        //状态初始化
        state = {
            username:'',
            password:''
        }

        //保存用户名到状态中
        saveFormData = (dataType, event)=>{
            this.setState({[dataType]:event.target.value})
        }

        //提交表单的回调
        handleSubmit = (e)=>{
            e.preventDefault()//阻止表单提交
            const {username,password} = this.state
            {/*数据中的状态被state管理起来，就是受控组件*/}
            alert(`用户名：${username} 密码：${password}`)
        }

        //建议使用受控组件，这样可以减少ref的数量，而ref是官方不推荐的
        render(){
            return(
                <form onSubmit={this.handleSubmit}>
                    {/*React回调的是saveFormData return的那个函数，而不是saveFormData本身*/}
                    {/*必须交一个函数给onChange作为回调*/}
                    用户名 ： <input onChange={(event) => {this.saveFormData('username',event)}} type="text" name="username"/>
                    密码 ： <input onChange = {event => this.saveFormData('password',event)} type="password" name="password"/>
                    <button>登陆</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>